.ChatUi {
  display: flex;
  height: 100%;
  background: #F8FBFC;
  flex: 1 1 auto;
  justify-content: center;
  position: relative;

  &.mobile {
    width: 100%;
  }

  .chatComponents {
    width: 100%;
    max-width: 1000px;
  }

  .UserSettings {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .globalInfoButton {
    position: absolute;
    right: 15px;
    bottom: 15px;
  }
}

.previewMode {
  position: fixed;
  bottom: 100px;
  right: 20px;
  z-index: 1000;

  .previewModeButton {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;

    &:hover {
      border-color: #1890ff;
      color: #1890ff;
    }

    &.active {
      background: #1890ff;
      border-color: #1890ff;
      color: #fff;

      &:hover {
        background: #40a9ff;
        border-color: #40a9ff;
        color: #fff;
      }
    }
  }
}
